import './css/weui.css'; 
import './css/public.css';  


$(function () {
	$.get("../data/search_data.json",function(data){
		let tData = data.subjects;
		let items = '';
		tData.forEach((item) =>{
			items += `<div class="weui-cell weui-cell_access" onclick="location='./subject.html?id=${item.id}'">
				                <div class="weui-cell__bd weui-cell_primary">
				                    <p>${item.title}</p>
				                </div>
				      </div>`;
		});
		$("#searchResult").html(items);
	});
	$("#headerTitle").text("Search");
	$("#searchBar").on("touchstart click", function (e) { 
		e.stopPropagation();
		$("#searchResult").css("display","none");
		if ( !$(this).hasClass("weui-search-bar_focusing") ) $(this).toggleClass("weui-search-bar_focusing");
	});
	$("#searchCancel").on("touchstart click", function (e) {
		e.stopPropagation();
		$("#searchResult").css("display","none");
		$("#searchBar").removeClass("weui-search-bar_focusing"); 
	});
	$("#searchClear").on("touchstart click", function(e){
		e.stopPropagation();
		$("#searchResult").css("display","none");
		$("#searchInput").val("");
	});
	$("#searchInput").on("input", function(e) {
		e.stopPropagation();
		$("#searchResult").css("display","block");
		console.log($(this).val());
	});
}); 
